<!--
 * @Author: early-autumn
 * @Date: 2020-05-15 15:54:18
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-05-18 15:21:45
-->
<template>
  <div>
    <el-form inline>
      <el-form-item>
        <el-button
          icon="el-icon-upload"
          type="primary"
          @click="handleUploadVisible"
        >
          上传影像
        </el-button>
      </el-form-item>
    </el-form>
    <upload
      v-model="uploadVisible"
      :title="title"
      @change="closeHandle"
      @submit="addNewShadow"
    />
    <el-tabs v-model="currentTab" @tab-click="handleClick">
      <el-tab-pane
        v-for="tab in tabOptions"
        :key="tab.label"
        :label="tab.label"
      >
        <el-row v-if="loading" :gutter="20">
          <el-col
            v-for="(item, index) in shadowList"
            :key="index"
            class="col"
            :sm="{ span: 8 }"
            :md="{ span: 8 }"
            :lg="{ span: 6 }"
            :xl="{ span: 4 }"
          >
            <el-card
              class="card"
              :body-style="{ padding: '0px' }"
              shadow="hover"
            >
              <div slot="header" class="clearfix">
                <span>{{
                  item.type == 1
                    ? '全景'
                    : item.type == 2
                    ? '小牙片'
                    : item.type == 3
                    ? 'CBCT'
                    : item.type == 4
                    ? '照片'
                    : item.type == 5
                    ? '其他'
                    : item.type == 6
                    ? '头侧'
                    : item.type == 7
                    ? '知情同意书'
                    : '正畸转诊单'
                }}</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="deleteShadow(item.id)"
                  >删除</el-button
                >
              </div>
              <el-image
                class="card__image"
                :src="item.url"
                fit="cover"
                :preview-src-list="[item.url]"
              />
              <div class="boxBottom">
                <el-tooltip class="item" effect="dark" placement="top">
                  <div slot="content">{{ item.remarks }}</div>
                  <div class="bottom1">{{ item.remarks }}</div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" placement="bottom">
                  <div slot="content">
                    {{ item.createBy }} 上传于 {{ item.createTime }}
                  </div>
                  <div class="bottom2">
                    {{ item.createBy }} 上传于 {{ item.createTime }}
                  </div>
                </el-tooltip>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <empty v-if="!total" content="暂无上传影像" height="200"></empty>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  listShadow,
  getShadow,
  delShadow,
  addShadows,
  updateShadow,
  exportShadow,
} from '@/api/erp/shadow'
import { mapState } from 'vuex'

export default {
  name: 'ImageRecordPane',
  components: {
    Upload: () => import('./Upload'),
    Empty: () => import('@/components/yiya/Empty'),
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      tabOptions: [
        {
          label: '所有类型',
          images: [],
        },
        {
          label: '全景',
          images: [],
        },
        {
          label: '小牙片',
          images: [],
        },
        {
          label: 'CBCT',
          images: [],
        },
        {
          label: '照片',
          images: [],
        },
        {
          label: '其他',
          images: [],
        },
        {
          label: '头侧',
          images: [],
        },
        {
          label: '知情同意书',
          images: [],
        },
        {
          label: '正畸转诊单',
          images: [],
        },
      ],
      currentTab: '',
      uploadVisible: false,
      title: '上传影像',
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      shadowList: [],
      total: 0,
    }
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.name,
    }),
  },
  mounted() {
    this.getShadowList()
  },
  methods: {
    handleClick(tab) {
      // if (tab.$options.propsData.label == '所有类型') {
      //   this.getShadowList()
      // }
      switch (tab.$options.propsData.label) {
        case '所有类型':
          this.queryParams.type = undefined
          this.getShadowList()
          break
        case '全景':
          this.queryParams.type = 1
          this.getShadowList()
          break
        case '小牙片':
          this.queryParams.type = 2
          this.getShadowList()
          break
        case 'CBCT':
          this.queryParams.type = 3
          this.getShadowList()
          break
        case '照片':
          this.queryParams.type = 4
          this.getShadowList()
          break
        case '其他':
          this.queryParams.type = 5
          this.getShadowList()
          break
        case '头侧':
          this.queryParams.type = 6
          this.getShadowList()
          break
        case '知情同意书':
          this.queryParams.type = 7
          this.getShadowList()
          break
        case '正畸转诊单':
          this.queryParams.type = 8
          this.getShadowList()
          break
        default:
          break
      }
    },
    async getShadowList() {
      this.loading = false
      await listShadow({
        ...this.queryParams,
        clinicPersonId: this.patient.id,
      }).then((response) => {
        this.shadowList = response.rows
        this.total = response.total
        this.loading = true
      })
    },
    handleUploadVisible() {
      this.uploadVisible = true
    },
    closeHandle(e) {
      this.uploadVisible = e
    },
    addNewShadow(e) {
      const { url } = e
      let params = {
        yiyaResourceShadows: [],
      }
      url.forEach((item) => {
        params.yiyaResourceShadows.push({
          remarks: e.remarks,
          clinicTime: e.clinicTime,
          clinicPersonId: this.patient.id,
          createBy: this.userName,
          type: e.type,
          url: item.url,
        })
      })
      addShadows(params).then((res) => {
        if (res.code === 200) {
          this.msgSuccess('新增成功')
          this.getShadowList()
        } else {
          this.msgError(res.msg)
        }
      })
    },
    deleteShadow(id) {
      delShadow(id).then((res) => {
        if (res.code === 200) {
          this.msgSuccess('删除成功')
          this.getShadowList()
        } else {
          this.msgError(res.msg)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.col {
  display: flex;
  justify-content: center;
}

.card {
  width: 250px;
  height: 350px;
  margin-bottom: 20px;

  .card__image {
    width: 250px;
    height: 250px;
  }
}
.boxBottom {
  display: flex;
  flex-wrap: wrap-reverse;
  padding: 0px 16px;
  .bottom1,
  .bottom2 {
    font-size: 14px;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    white-space: nowrap;
    text-align: center;
  }
}
</style>
